<!--  -->
<template>
  <a-modal
    :maskClosable="false"
    :destroyOnClose="true"
    title="合作配置"
    centered
    :width="500"
    v-model="visible"
    @ok="handleOk"
  >
    <div>
      <div class="info">
        <div class="title">合作组织</div>
        <div class="content">
          <img class="logo" :src="infoData.logo" alt="" />
          <div class="org">
            <div class="name">{{ infoData.orgName }}</div>
            <div class="tags">
              <span class="tag" v-for="item in infoData.industry" :key="item">{{ item }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="config">
        <div class="title">合作价格配置</div>
        <div class="content">
          <div class="line1">
            <span>查看联系方式</span>
            <span>
              <a-input-number v-model="params2.priceContact" :min="0" :max="1000" @change="onGetPrice" />
              元
            </span>
          </div>
          <div class="line2">
            服务费{{ resData.priceContactSerivce }}元，可分润金额<span class="price"
              >{{ resData.priceContactSum }}元</span
            >
          </div>
        </div>
        <div class="content">
          <div class="line1">
            <span>秘书处撮合沟通对接</span>
            <span>
              <a-input-number v-model="params2.pricePeople" :min="0" :max="1000" @change="onGetPrice" />
              元
            </span>
          </div>
          <div class="line2">
            服务费{{ resData.pricePeopleSerivce }}元，可分润金额<span class="price"
              >{{ resData.pricePeopleSum }}元</span
            >
          </div>
        </div>
      </div>

      <div class="config">
        <div class="title">合作分润配置</div>
        <div class="content">
          <div class="line1">
            <span>本组织剩余比例</span>
            <span>
              <a-input-number v-model="params2.discount" :min="0" :max="100" @change="onGetPrice" />
              %
            </span>
          </div>
          <div class="line2">
            查看联系方式：佣金率约{{ params2.discount }}%，合作分润金额<span class="price"
              >{{ resData.priceContactCompute }}元</span
            >
          </div>
          <div class="line2">
            秘书处撮合沟通对接：佣金率约{{ params2.discount }}%，合作分润金额<span class="price"
              >{{ resData.pricePeopleCompute }}元</span
            >
          </div>
        </div>
        <div class="content">
          <div class="line1">
            <span>合作组织分润比例</span>
            <span>
              <a-input-number v-model="params2.discount2" :min="0" :max="100" @change="onGetPrice" disabled />
              %
            </span>
          </div>
          <div class="line2">
            查看联系方式：佣金率约{{ params2.discount2 }}%，合作分润金额<span class="price"
              >{{ resData.priceContactComputeTo }}元</span
            >
          </div>
          <div class="line2">
            秘书处撮合沟通对接：佣金率约{{ params2.discount2 }}%，合作分润金额<span class="price"
              >{{ resData.pricePeopleComputeTo }}元</span
            >
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { LoadPrice, PriceQuery } from '@/api/business/cooperation'
export default {
  components: {},
  data() {
    return {
      visible: false,
      index: 0,
      infoData: {
        logo: '',
        orgName: '',
      },
      params2: {
        tenantId: 1002, //合作的机构
        pricePeople: 90, //秘书处价格
        priceContact: 10, //联系价格
        discount: 50, //本组织比例
        discount2: 50, //本组织比例
      },
      resData: {},
      params: {
        tenantId: undefined,
        projectType: undefined,
      },
    }
  },
  computed: {},
  watch: {},
  methods: {
    show(index, infoData, tenantId, projectType) {
      this.index = index
      this.infoData = infoData
      this.params.tenantId = tenantId
      this.params.projectType = projectType
      // Object.keys(this.params).forEach((k) => {
      //   this.params[k] = data[k]
      // })
      // this.index = index
      // this.infoData.logo = data.logo
      // this.infoData.orgName = data.orgName
      this.getLoadPrice()
      this.visible = true
    },
    async getLoadPrice() {
      let res = await LoadPrice({ ...this.params })
      console.log('res-->', res)
      this.params2.tenantId = this.params.tenantId
      this.params2.pricePeople = res.data.pricePeople
      this.params2.priceContact = res.data.priceContact
      this.params2.discount = res.data.discount
      this.params2.discount2 = res.data.discount2
      this.resData = res.data
    },
    handleFromPriceContactChange() {
      this.getLoadPrice()
    },
    async onGetPrice() {
      let res = await PriceQuery({ ...this.params2 })
      this.resData = res.data
      this.params2.discount2 = res.data.discount2
    },
    handleOk() {
      this.$emit('ok', this.index, this.resData)
      this.visible = false
    },
  },
  created() {},
  mounted() {},
}
</script>
<style lang="less" scoped>
.info {
  .title {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0;
  }
  .content {
    display: flex;
    align-items: center;
    .logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .org {
      margin-left: 10px;
      .name {
        font-size: 14px;
        font-weight: bold;
      }
      .tags {
        margin-top: 10px;
        .tag {
          padding: 2px 5px;
          background: #eee;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
    }
  }
}

.config {
  .title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
  }
  .content {
    width: 400px;
    margin-top: 10px;
    .line1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .line2 {
      text-align: right;
      margin-top: 10px;
      .price {
        color: red;
      }
    }
  }
}
</style>